import React, { Component } from "react";

/*
  改变this指向
  1. 直接在事件的内联里面添加 .bind(this)
    这种方式是不推荐的
    因为每次添加事件的时候，都会产生新函数在内存中，导致性能问题

  2. 在constructor里面添加this.xxx = this.xxx.bind(this);
    比较推荐的方式
    因为将bind函数返回的新函数，用变量存了下来，不会增加内存了

  3. 使用箭头函数
    使用了箭头函数的this指向外层的特点，也不会导致内存增加
    最推荐的方式
*/

class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 1,
    };

    // this.handleClick = this.handleClick.bind(this);
  }

  // handleClick() {
  //   console.log(this.state.count);
  // }

  handleClick = () => {
    console.log(this.state.count);
  };

  render() {
    return (
      <>
        <h2>this指向问题</h2>
        {/* <button onClick={this.handleClick.bind(this)}>btn</button> */}
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;

// import React from "react";

// const App = () => {
//   const handleClick = () => {
//     console.log(123);
//   };

//   return (
//     <>
//       <h2>事件</h2>
//       <button onClick={handleClick}>btn</button>
//     </>
//   );
// };

// export default App;
